﻿<h4>2. New table</h4>
<p>
    You can create your own table here. The plugin for this example is constructed
    to show command texts in French.
</p>
<div id="ownTableUnAvailPrompt">
    <div class="button" onclick="onAddTable(); return false;">Create</div>
</div>
<div id="ownTableAvailPrompt" style="display:none;">
    <div class="button" onclick="onDeleteTable(); return false;">Delete</div>
</div>
<div id="ownTable"></div>
<div style="border-bottom: 1px solid #497981; margin-bottom: 1.833em;">
    <input id="flextabledit2ChkBox" type="checkbox" />
    <div id="flextabledit2Tutorial" style="display: none; margin-bottom: 2.0em;">
        @Html.RenderExtMarkdown("~/Markdown/Demos/FlexTabledit2.md")
    </div>
</div>

<div id="createTableDialog" class="dialogPopUp">
    <div class="closeButton" onclick="javascript: $('#createTableDialog').dialog('close');">
        <span>X</span>
    </div>
    <h2>Initial table size</h2>
    <div class="sideBySideCols">
        <div class="leftCol-s" style="width:160px;">
            <p><b>Number of columns:</b></p>
        </div>
        <div class="rightCol">
            <input id="flxtblNrOfCols" size="4" value="4" />
        </div>
    </div>
    <div class="sideBySideCols">
        <div class="leftCol-s" style="width:160px;">
            <p><b>Number of rows:</b></p>
        </div>
        <div class="rightCol">
            <input id="flxtblNrOfRows" size="4" value="10" />
        </div>
    </div>
    <div class="button" style="margin-top:0.833em;" onclick="javascript: onCreateTable();">Create table</div>
</div>

<script type="text/javascript">
  function onAddTable() {
    $('#createTableDialog').dialog();
  }

  function onCreateTable() {
    var nrofCols = $('#flxtblNrOfCols').val();
    if ( nrofCols < 1) nrofCols = 1;
    var nrofRows = $('#flxtblNrOfRows').val();
    if ( nrofRows < 1) nrofRows = 1;
    nrofRows++;
    $('#createTableDialog').dialog('close');
    // Init table
    var content = [];
    for (var r = 0; r < nrofRows; r++ ) {
      var row = [];
      for (var c = 0; c < nrofCols; c++) {
        row.push("");
      }
      content.push(row)
    }
    $('#ownTableUnAvailPrompt').hide();
    $('#ownTableAvailPrompt').show();
    $('#ownTable').flextabledit({
      content: content,
      addTableClass: "myTable",
      texts: { cut: 'Couper', copy: 'Copier', paste: 'Coller', insert: 'Insérer', remove: 'Supprimer', columnName: 'Nom' }
    });
  }

  function onDeleteTable() {
    $('#ownTable').flextabledit('destroy');
    $('#ownTableAvailPrompt').hide();
    $('#ownTableUnAvailPrompt').show();
  }
</script>